<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/element.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/qczp.css"/>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist/cropper.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/element.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="page_root qczp_page">
        <el-card class="box-card" shadow="never">
            <div class="title title1">监督抽查（扦样）相片</div>

            <div class="content">
                <el-row>
                    <el-col :span="10">
                        <div class="pic_wrap" @click="previewClick(0)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible=true;picIdx=0"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(0)"></el-button>
                        </div>
                        <div class="title">{{form.pics[0].title}}</div>
                    </el-col>
                    <el-col :span="10" :offset="4">
                        <div class="pic_wrap" @click="previewClick(1)">
                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini"@click="dialogVisible=true;picIdx=1"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(1)"></el-button>
                        </div>
                        <div class="title">{{form.pics[1].title}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <div class="pic_wrap" @click="previewClick(2)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini"@click="dialogVisible=true;picIdx=2"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(2)"></el-button>
                        </div>
                        <div class="title">{{form.pics[2].title}}</div>
                    </el-col>
                    <el-col :span="10" :offset="4">
                        <div class="pic_wrap" @click="previewClick(3)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini"@click="dialogVisible=true;picIdx=3"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(3)"></el-button>
                        </div>
                        <div class="title" @click="setTit(3)">{{form.pics[3].title}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <div class="pic_wrap" @click="previewClick(4)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible=true;picIdx=4"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(4)"></el-button>
                        </div>
                        <div class="title" @click="setTit(4)">{{form.pics[4].title}}</div>
                    </el-col>
                    <el-col :span="10" :offset="4">
                        <div class="pic_wrap" @click="previewClick(5)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible=true;picIdx=5"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(5)"></el-button>
                        </div>
                        <div class="title" @click="setTit(5)">{{form.pics[5].title}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <div class="pic_wrap" @click="previewClick(6)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible=true;picIdx=6"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(6)"></el-button>
                        </div>
                        <div class="title" @click="setTit(6)">{{form.pics[6].title}}</div>
                    </el-col>
                    <el-col :span="10" :offset="4">
                        <div class="pic_wrap" @click="previewClick(7)">

                        </div>
                        <div class="pic_btns">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible=true;picIdx=7"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPic(7)"></el-button>
                        </div>
                        <div class="title" @click="setTit(7)">{{form.pics[7].title}}</div>
                    </el-col>
                </el-row>

                <div>
                    以上照片是{{date}}，广州市农作物种子质量检验中心扦样人员从{{companyName}}现场拍摄的照片，上述内容与原地事实相符。
                </div>
            </div>
        </el-card>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="80%" :before-close="handleClose" @opened="open"  @closed="dialog1Close">
        <div class="htmleaf-container" style="background-color: lightgray">
            <!-- Content -->
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <!-- <h3 class="page-header">Demo:</h3> -->
                        <div class="img-container">
                            <img src="img/fy_pic.png" alt="Picture">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <!-- <h3 class="page-header">Preview:</h3> -->
                        <div class="docs-preview clearfix">
                            <div class="img-preview preview-lg"></div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-9 docs-buttons">
                        <!-- <h3 class="page-header">Toolbar:</h3> -->
                        <div class="btn-group">
                            <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
                                <span class="docs-tooltip" data-toggle="tooltip" title="放大">
                                    <span class="icon icon-zoom-in"></span>
                                </span>
                            </button>
                            <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
                                <span class="docs-tooltip" data-toggle="tooltip" title="缩小">
                                  <span class="icon icon-zoom-out"></span>
                                </span>
                            </button>
                            <button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate Left">
                                <span class="docs-tooltip" data-toggle="tooltip">
                                  <span class="icon icon-rotate-left" title="逆时针90°"></span>
                                </span>
                            </button>
                            <button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate Right">
                                <span class="docs-tooltip" data-toggle="tooltip" title="顺时针90°">
                                  <span class="icon icon-rotate-right"></span>
                                </span>
                            </button>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
                                <span class="docs-tooltip" data-toggle="tooltip" title="重置">
                                  <span class="icon icon-refresh"></span>
                                </span>
                            </button>
                            <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                                <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
                                <span class="docs-tooltip" data-toggle="tooltip" title="选择照片">
                                  <span class="icon icon-upload"></span>
                                </span>
                            </label>
                            <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN"
                                   title="Set Aspect Ratio">
                                <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
                                <span class="docs-tooltip" data-toggle="tooltip">自由尺寸</span>
                            </label>
                        </div>
                        <div class="btn-group btn-group-crop">
                            <button class="btn btn-primary" data-method="getCroppedCanvas" type="button">
                                <span class="docs-tooltip" data-toggle="tooltip">确定</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible2" width="50%" :before-close="previewClose" @opened="previewOpen">
        <div id="prePic" v-loading="loading">
            <img src="" alt="">
        </div>
    </el-dialog>

    <el-dialog title="请选择" :visible.sync="dialogVisible3"width="30%">
        <el-select v-model="form.pics[picIdx].title" placeholder="请选择" @change="titleChange" style="width: 100%">
            <el-option v-for="item in selects" :key="item" :label="item" :value="item">
            </el-option>
        </el-select>
    </el-dialog>
</div>
<script src="assets/js/bootstrap.min.js"></script>
<script src="dist/cropper.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            hasInit:false,
            tits:[
                    ['扦样品种','生产经营许可证'],
                    ['进货票据','检疫证书'],
                    ['种子销售授权委托书','农作物种子生产经营备案表'],
            ],
            selects:[],
            loading:true,
            picIdx:0,
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            date:'',
            companyName:'',
            form: {
                pics:[
                    {title:'扦样现场', file:''},
                    {title:'扦样品种', file:''},
                    {title:'营业执照', file:''},
                    {title:'扦样品种', file:''},
                    {title:'进货票据', file:''},
                    {title:'检疫证书', file:''},
                    {title:'农作物种子生产经营备案表', file:''},
                    {title:'种子销售授权委托书', file:''},
                ],
            },
        },

        watch:{
            form: {
                handler: function(val) {
                },
                deep: true
            }
        },

        created(){
            window.cache = window.parent.cache;
            this.form.pics = window.cache.qczp
            var sample = window.cache.getItemData(0,'sample')
            this.date = sample.date
            this.companyName = sample.companyName
            this.initPic()
            // this.initClip()
        },

        methods: {
            handleClose(done) {
                done();
                dialogVisible=false
            },
            open(){
                init(this)
                this.hasInit = true
            },
            // 关闭裁剪框，保存数据
            dialog1Close(){
                var cv = $('.pic_wrap').eq(this.picIdx).find('canvas')
                if(cv){
                    var idx = Number(this.picIdx)
                    var key = idx
                    var qczp = window.cache.qczp
                    var blob = this.dataURLtoBlob(cv[0].toDataURL("image/png"))
                    qczp[key].picData = blob
                    var type = blob.type.substring(6)
                    var originalFilename =key + '.' + type
                    var file =  new window.File([blob], originalFilename, {type: type})
                    qczp[key].file = file
                }
            },
            dataURLtoBlob(dataurl) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type:mime});
            },
            // 预览开启前
            previewClick(x){
                this.loading = true
                var length = $('.pic_wrap').eq(x).find('canvas').length
                if(length == 0){
                    return
                }
                this.picIdx = x
                this.dialogVisible2 = true
            },
            // 预览关闭后
            previewClose(){
                this.dialogVisible2 = false
            },
            // 预览
            previewOpen(){
                var cv = $('.pic_wrap').eq(this.picIdx).find('canvas').get(0);
                var x=cv.toDataURL("image/png")
                $('#prePic img').attr('src',x)
                this.loading = false
            },
            // 删除
            delPic(x){
                var cv = $('.pic_wrap').eq(x).find('canvas');
                console.log(cv[0])
                if(cv[0] != undefined){
                    cv.remove()
                    var qczp = window.cache.qczp
                    qczp[x].picData=undefined
                    qczp[x].file=undefined
                }

            },

            setTit(x){
                this.picIdx = x
                this.dialogVisible3 = true
                if(x == 3){
                    this.selects = this.tits[0]
                }else if(x == 4 || x == 5){
                    this.selects = this.tits[1]
                }else{
                    this.selects = this.tits[2]
                }
            },

            titleChange(val){
                console.log(val)
            },

            initPic(){
                debugger
                var picArr = this.form.pics
                for (var i = 0;i<picArr.length;i++){
                    const idx = i
                    var file = picArr[i].file
                    if(file){
                        this.setPic(i,file)
                    }
                }
            },

            setPic(idx,file){
                var img = new Image();
                var canvas = document.createElement("canvas");
                var cwidth = $('.pic_wrap').eq(0).innerWidth()
                var fr = new FileReader(file)
                fr.readAsDataURL(file)
                fr.onload = function () {
                    img.src = this.result
                    img.onload = function () {
                        var width = img.width;
                        var height = img.height;
                        canvas.width = width;
                        canvas.height = height
                        canvas.getContext("2d").drawImage(img, 0, 0);
                        if(width/height >= 1){
                            $(canvas).outerWidth(cwidth)
                        }else{
                            $(canvas).outerHeight(cwidth)
                        }

                        $('.pic_wrap').eq(idx).html($(canvas))
                    };
                }
            }

        }
    })
</script>
</body>
</html>
